<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: aqua;
      }
      .custom-shape-divider-top-1634603890 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        transform: rotate(180deg);
      }

      .custom-shape-divider-top-1634603890 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 217px;
        transform: rotateY(180deg);
      }

      .custom-shape-divider-top-1634603890 .shape-fill {
        fill: #ffffff;
      }
    </style>
  </head>
  <body>
    <object
      data="./icon1.svg"
      color="red"
      width="300"
      height="300"
      type="image/svg+xml"
      codebase="http://www.adobe.com/svg/viewer/imstall/"
    />
  </body>
  <script>
    let tag300 = false;
    let tag100 = true;
    window.onload = () => {
      let time;
      let tag = false;
      let total = 100;
      const dom = document.querySelector(
        ".custom-shape-divider-top-1634603890 svg"
      );
      time = setInterval(() => {
        if (tag100) {
          total++;
        } else {
          total--;
        }
        if (total === 100) {
          tag300 = false;
          tag100 = true;
        } else if (total === 300) {
          tag300 = true;
          tag100 = false;
        }
        dom.style.width = `calc(${total}% + 1.3px)`;
      }, 40);
    };
  </script>
</html>
